<template>
  <div class="contentShadow">
    <el-container>
      <el-header style="margin-bottom: 30px">
        <h1>科研情况表</h1>
        <el-tag>学号：{{ studentId }}</el-tag>
      </el-header>
      <el-main>
        <el-form v-for="(item,index) in domains" :key="index" :ref="'research' + index" :model="domains[index]"
                 style="text-align:left" :inline="false">
          <el-form-item class="formItemHeader" label="科研编号" prop="id" :rules="{
                                required: true, message: '科研编号不能为空', trigger: 'blur'
                                }">
            <el-input v-model="item.id" type="text" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item class="formItemHeader" label="类型" prop="researchType" :rules="{
                                required: true, message: '类型不能为空', trigger: 'blur'
                                }">
            <el-radio-group v-model="item.researchType">
              <el-radio :label="1">论文</el-radio>
              <el-radio :label="2">比赛</el-radio>
              <el-radio :label="3">专利</el-radio>
              <el-radio :label="4">其他</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="formItemHeader" label="时间" prop="researchTime" :rules="{
                                required: true, message: '时间不能为空', trigger: 'blur'
                                }">
            <el-date-picker v-model="item.researchTime" value-format="yyyy-MM-dd" type="date"></el-date-picker>
          </el-form-item>

          <el-form-item class="formItemHeader" label="名称" prop="researchName" :rules="{
                                required: true, message: '名称不能为空', trigger: 'blur'
                                }">
            <el-input v-model="item.researchName" type="text"></el-input>
          </el-form-item>
          <el-form-item class="formItemHeader" label="描述" prop="researchContent" :rules="{
                                required: true, message: '描述不能为空', trigger: 'blur'
                                }">
            <el-input v-model="item.researchContent" type=textarea :autosize="{ minRows: 5, maxRows: 8}"></el-input>
          </el-form-item>
          <el-form-item class="formItemHeader">
            <el-button class="formBtn" icon="el-icon-delete" type="danger"
                       @click="removeDomain(index)"></el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="formBtn" type="primary" @click="submitResearch(index)" :loading="loading">提交</el-button>
          </el-form-item>

        </el-form>
      </el-main>
      <el-button class="formBtn" icon="el-icon-plus" type="success" @click="addDomain"></el-button>
    </el-container>

  </div>
</template>
<script>
import {getStudentInfo, getResearch, addResearch, deleteResearch} from "@/api/student";

export default {
  data() {
    return {
      studentId: '',
      domains: [
        // {
        //   researchType: '',
        //   researchTime: '',
        //   researchName: '',
        //   researchContent: '',
        // },
      ],
      timestamp: '',
      loading: false,
    };
  },
  mounted() {
    getStudentInfo().then((res) => {
      // console.log(res.data);
      this.studentId = res.data.studentId;
    });
    getResearch().then((res) => {
      this.domains = res.data;
      console.log(this.domains);
    });
  },
  components: {},
  methods: {
    submitResearch(index) {
      // console.log(ref)
      // for (let domain in this.dynamicData.domains) {
      //   const temp = this.dynamicData.domains[domain]
      //   if (temp.type === '' || temp.time === '' || temp.name === '' || temp.content === '') {
      //     this.$message.error("请填写必要的信息！")
      //     return
      //   }
      //
      // }
      this.timestamp = Date.now().toString();
      this.$nextTick(() => {
        this.$refs["research" + index.toString()][0].validate(valid => {
          if (valid) {
            this.loading = true;
            // 传给后端的值
            const params = this.domains[index]
            console.log(params)
            addResearch(params).then(res => {
              // console.log(res)
              // console.log(res.message)
              if (res.code === 50003) {
                this.$message.error(res.msg)
              } else {
                getResearch().then((res0) => {
                  this.domains = res0.data;
                  // console.log(this.domains);
                });
                this.$message.success(res.msg)
              }
              this.loading = false
            })
          } else {
            //console.log("发生异常");
            this.$message.error("请按正确格式填写表单")
            this.loading = false;
            return false;
          }
        });
      })
    },
    removeDomain(index) {
      this.$confirm('确定删除此记录吗？', '提示').then(() => {
        if (this.domains[index].id !== 0) {
          deleteResearch({id: this.domains[index].id}).then((res) => {
            if (res.code === 200) {
              console.log(res)
              this.$message.success("删除成功")
            } else {
              this.$message.error("删除失败")
            }
          })
        }
        this.domains.splice(index, 1)
      }).catch(() => {
      });
    },
    addDomain() {
      this.domains.push({
        id: 0,
        researchType: null,
        researchTime: '',
        researchName: '',
        researchContent: '',
      });
    }
  }
};
</script>
<style>

.research {
  padding: 20px;
}

.formItemHeader {
//display: inline-block; //margin-right: 10px; //width: 30%; margin-bottom: 20px;
}

.formItemHeader:last-of-type {
//width: 400px;
}

.formBtn {
  width: 100%;
}
</style>
